$(window).on("load", function () {
	$('#preloader').fadeOut('slow', function () {
		$(this).remove();
	});
});
$(function () {
	var cat_id = 0;
	//向下滑动自动加载
	var page = 1; // 页码
	var totalpage = 5; //模拟总页数
	var flag = true; // flag 用于防止滚动中（内容还未加载完毕）加载多次
	$(window).scroll(function () {
		var scrollTop = $(document).scrollTop(); // 滚动条距离顶部的高度
		var docHeight=$(document).height();
		var winHeight=$(window).height();
		
		var loadmoreHeight=$('.loadmore').offset().top;
		var footHeight=$('.footer').height();
		if (scrollTop>=docHeight-winHeight-footHeight) {

			if (flag) {
				// 触发后
				$('.loadmore').html('正在加载中');
				flag = false
				// 模拟ajax请求
				setTimeout(function () {
					page++;
					loadMore(page)
				}, 2000)
			}
		}
	})

	// 加载更多
	function loadMore(page) {
		if (page > totalpage) {
			$('.loadmore').html('没有更多了');
			return false;
		}
		var dom = '';
		for (var i = 0; i < 10; i++) {
			dom += `
		<div class="item">
		<div class="imgcon">
			<a href="javascript:;"><img src="./images/logo1.png"></a>
		</div>
		<p class="pro-name">【格林貝可創藝塔專賣】GREEN BAKERY 齒輪布丁(德式布丁) 宅配最少量 5 顆</p>
		<p class="pro-desc">【賞味期限】: 宅配到貨3天 【保存方式】</p>
		<p class="pro-price"><span class="tp"><em>NT$</em>99</span><span class="op">NT$199</span></p>
		<p class="btncon">
			<a class="btn btn-default proDetails" href="javascript:;">购买</a>
			<a class="btn btn-main addToCart" href="javascript:;">加入购物车</a>

		</p>
	</div>
		`
		}
		$('#goods_box_con_0').append($(dom))
		$('.loadmore').html('加载更多');
		// dom渲染完毕后重新开启flag

		flag = true;
	}

	//设置皮肤
	var args = {
		"mainColor": '#58b4a7', //主色
		// "topBgColor": '#f6f6f6', //头部背景色
		// "topTextColor": '#333', //头部文字色
		"btnTextColor": "#fff", //按钮文字色
		// "contactBgColor": '#f6f6f6', //联络背景色
		// "contactTextColor": '#333', //联络文字色
		// "contactFormColor": '#333', //联络表单文字色
		// "footBgColor": '#aaa', //底部背景色
		// "footTextColor": '#333', //底部文字色
	}
	setSkin(args);



	//详情和加入购物车
	$('.proDetails').click(function () {
		$('#detaelModal').modal('show');
	})
	$('.addToCart').click(function () {
		$('#cartModal').modal('show');
	})
	$(document).on('click', '.jian', function (e) {
		var par = $(this).closest('.cont');
		var num = parseInt(par.find('.num').val());
		if (num == 1) {
			return false;
		}

		num--;
		par.find('.num').val(num);
	});
	$(document).on('click', '.jia', function (e) {
		var par = $(this).closest('.cont');
		var num = parseInt(par.find('.num').val());
		num++;
		par.find('.num').val(num);
	});
	$(document).on('blur', '.num', function (e) {
		var num = $(this).val();
		if (num == '' || num < 1) {
			$(this).val('1');
		}
	});


	//图片加载失败
	$('img').one("error", function () {
		$(this).attr("src", "./images/error.png");
	});
	//tabs标签切

	tabsAni($('.tabs-nav li').eq(0));
	$('.tabs-nav li').click(function () {
		$('.tabs-nav li').removeClass('active');
		$(this).addClass('active');
		tabsAni($(this));
	})





	setTimeout(function () {
		$('#preloader').fadeOut('slow', function () {
			$(this).remove();
		});
	}, 1000);

	// 精美车图轮播 
	var picswiper = new Swiper('.shop-swiper', {
		loop: true,
		autoplay: {
			delay: 5000,
			disableOnInteraction: false,
		},
		navigation: {
			nextEl: '.shop-swiper .swiper-button-next',
			prevEl: '.shop-swiper .swiper-button-prev',
		},
		// 如果需要分页器
		pagination: {
			el: '.shop-swiper .swiper-pagination',
			clickable: true,
		},
		initialSlide: 0, //初始化为第一张图
		observer: true, //修改swiper自己或子元素时，自动初始化swiper
		observeParents: true,
	});


	//语言选择
	$('.info_languages li').click(function () {
		$('.info_languages li').removeClass('active')
		$(this).addClass('active');
	})

	function setSkin(args) {
		var defaultOpts = {
			"mainColor": '#dbb663', //主色
			"topBgColor": '#372026', //头部背景色
			"topTextColor": '#fff', //头部文字色
			"btnTextColor": "#000", //按钮文字色
			"contactBgColor": '#1f1f1f', //联络背景色
			"contactTextColor": '#b3b3b3', //联络文字色
			"contactFormColor": '#999', //联络表单文字色
			"footBgColor": '#372026', //底部背景色
			"footTextColor": '#f4f4f4', //底部文字色
		};
		var opts = $.extend(true, {}, defaultOpts, args);
		console.log(opts);
		$('.top-bg-color').css({
			"background-color": opts.topBgColor
		});
		$('.top-text-color').css({
			"color": opts.topTextColor
		});
		$('.contact-bg-color').css({
			"background-color": opts.contactBgColor
		});
		$('.contact-text-color').css({
			"color": opts.contactTextColor
		});
		$('.contact-form-color').css({
			"color": opts.contactFormColor
		});
		$('.foot-bg-color').css({
			"background-color": opts.footBgColor
		});
		$('.foot-text-color').css({
			"color": opts.footTextColor
		});
		var shopSwiper = document.getElementById('shop-swiper');
		shopSwiper.style.setProperty('--swiper-theme-color', opts.mainColor);
		shopSwiper.style.setProperty('--swiper-navigation-color', opts.mainColor);
		$('.btn-main').css({
			'background': opts.mainColor,
			"color": opts.btnTextColor
		});
		$('.footer .footer-middle .line,.tabs-line').css({
			'background': opts.mainColor
		});
		$('.tabs-tags').find('.active').css({
			'color': opts.mainColor
		});
		$('.footer .footer-bottom h5 a,.tabs-flow .pro-price .tp').css({
			'color': opts.mainColor
		});
		$('.tabs-tags a').click(function () {
			$('.tabs-tags a').removeClass('active').css('color', '#999');
			$(this).addClass('active').css('color', opts.mainColor);

		})
	}

	function tabsAni(o) {
		var initWidth = o.position().left;
		var paddingLeft = parseFloat(o.css("padding-left"));
		var innerWidth = o.innerWidth() - 2 * paddingLeft;
		$('.tabs-line').css({
			left: initWidth + paddingLeft,
			width: innerWidth
		});
		var idx = o.attr('data-index');
		$('.tabs-flow').hide();
		$('.tabs-flow').eq(idx).show();
	}
})